<script>
export default {
  name: "lemonMessageVideo",
  inheritAttrs: false,
  inject: ["IMUI"],
  render () {
    return (
      <lemon-message-basic
        class="lemon-message-video"
        props={{ ...this.$attrs }}
        scopedSlots={{
          content: props => {
            // return (
            //       <video controls ref="video" crossOrigin="anonymous" style="object-fit: fill;">
            //           <source src={props.content} type="video/mp4" />
            //       </video>
            //
            // );
              const urls = JSON.parse(props.content)
              return (
                  <div class={[
                      'video-card'
                  ]}
                       style={{
                       }}
                  >
                      <el-image style="max-height: 200px" src={urls[1]} fit="cover">
                          <div slot="error" class="image-slot">
                              <i class="el-icon-picture-outline"></i>
                          </div>
                      </el-image>
                      <div class="video-shadow">
                          <div class="el-icon el-icon-video-play video-icon"></div>
                      </div>
                  </div>
              );
          },
        }}
      />
    );
  },
};
</script>
<style >
  .video-card{
    min-width:60px;
    max-width:400px;
    color:#666;
    position: relative;
  }
.video-shadow{
  position: absolute;width:100%;height:100%;background: #83838387;z-index:9;top:0;
}
.video-icon{
    font-size: 18px;
    color: white;
    position: absolute;
	  top: 50%;
	  z-index: 10;
	  transform: translate(-50%, -50%);
	  left: 50%;
  }
.lemon-message.lemon-message-video{
  user-select: none;
  .lemon-message__content {
    padding:0;
    font-size: 12px;
    cursor: pointer;
    background: #E7F0F3 !important;
    border-radius: 6px !important;
    overflow: hidden;
    &::before {
      display: none;
    }
  }

}

  .image-slot{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
  }
</style>
